<template>
	<div class="user_message_wrapper wrapper">
		<el-button type="primary" size="small" class="send" @click="handleEpistolize">发送私信</el-button>
		<el-tabs class="custom_top" v-model="activeName" type="card">
			<el-tab-pane label="收件箱" name="inbox"></el-tab-pane>
			<el-tab-pane label="发件箱" name="outbox"></el-tab-pane>
		</el-tabs>
		<div class="search">
			<el-input size="small" v-model="searchWord"></el-input>
			<el-button size="small" type="primary">查询</el-button>
		</div>
		<div class="table">
			<el-table :data="tableData" stripe style="width: 100%" height="100%">
				<el-table-column prop="date" label="标题" min-width="300"></el-table-column>
				<el-table-column prop="name" label="发件人" min-width="180"></el-table-column>
				<el-table-column prop="address" label="状态" min-width="180"></el-table-column>
				<el-table-column prop="address" label="发送时间" min-width="180"></el-table-column>
				<el-table-column prop="address" label="操作" width="180"></el-table-column>
				<template slot="empty">
					<el-empty description="暂无数据"></el-empty>
				</template>
			</el-table>
		</div>
		<el-dialog title="发送私信" :visible.sync="epistolizeDialog" :close-on-click-modal="false" width="992px" @closed="handleDialogClose">
			<el-form class="epistolize_form" ref="letterForm" label-width="80px" size="medium" :model="letterForm" :rules="letterRules">
				<el-form-item label="标题" prop="title"><el-input placeholder="请输入信件标题" v-model="letterForm.title"></el-input></el-form-item>
				<el-form-item label="收件人" prop="receivePerson">
					<select-user placeholder="请选择人员" size="medium" :ue-height="400" v-model="letterForm.receivePerson"></select-user>
				</el-form-item>
				<el-form-item label="内容" prop="content"><UEditor v-model="letterForm.content" /></el-form-item>
			</el-form>
			<template slot="footer">
				<el-button size="medium" @click="epistolizeDialog = false">取消</el-button>
				<el-button size="medium" type="primary">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import selectUser from './selectUser';
export default {
	components: { selectUser },
	data() {
		return {
			activeName: 'inbox',
			searchWord: '',
			tableData: [],
			letterForm: {},
			letterRules: {
				title: { required: true, message: '请输入信件标题', trigger: 'blur' },
				receivePerson: { type: 'array', required: true, message: '请至少选择一个收信人', trigger: 'change' }
			},
			epistolizeDialog: false
		};
	},
	watch: {
		activeName: {
			handler(value) {
				console.log(value);
			},
			immediate: true
		}
	},
	methods: {
		//点击写信
		handleEpistolize() {
			this.epistolizeDialog = true;
		},

		//关闭写信弹窗
		handleDialogClose() {
			this.$refs['letterForm'].resetFields();
		},

		//选择人员
		handleSelectUser() {
			console.log('123123');
		}
	}
};
</script>

<style lang="scss" scoped>
.user_message_wrapper {
	display: flex;
	flex-direction: column;
	position: relative;
	height: calc(100% - 20px);
	::v-deep .el-tabs__header {
		flex-shrink: 0;
		margin-bottom: 0;
		.el-tabs__item {
			background-color: #fff;
			border-bottom-color: #e4e7ed;
		}
		.is-active {
			border-bottom-color: #fff;
		}
	}
	.search {
		display: flex;
		padding: 15px;
		background-color: #fff;
		border-left: solid 1px #e4e7ed;
		border-right: solid 1px #e4e7ed;
		.el-input {
			width: 300px;
			margin-right: 10px;
		}
	}
	.table {
		flex: 1;
		overflow: hidden;
		padding: 0 15px 15px;
		background-color: #fff;
		border: solid 1px #e4e7ed;
		border-top: none;
	}
	.el-button.send {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
	}
}
.epistolize_form {
	width: 100%;
	padding: 22px 30px 0 0;
}
</style>
